import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)


//相当于一个vuex的库//定义状态的选项
// let state = {
//     count : 1
// }

// Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
// 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
// 不能有异步操作
// let mutations = { 
//     // 你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”
//     // 要唤醒一个 mutation handler，
//     // 你需要以相应的 type 调用 store.commit 方法：
//     // inc (state,data) {
//     //     state.count+= data.age
//     // },

//     // $store.commit 对象风格的提交方式
//     // 当使用对象风格的提交方式，整个对象都作为载荷(第二个参数)传给 mutation 函数，因此 handler 保持不变：
//     // inc (state,obj) {
//     //     console.log(obj)//整个对象
//     //     state.count+= obj.data.age
//     // },

//     // Action 提交的 mutation
//     inc (state,data) {
//         console.log(data)
//         state.count+= data.num
//     },
//     // state为第一个参数，最多只能传两个参数(可以把第二个参数写为对象来传)
//     dec (state,data) {
//         state.count--
//     }
// }

// Action 类似于 mutation，不同在于：
// Action 提交的是 mutation，而不是直接变更状态。
// Action 可以包含任意异步操作。
// let actions = {
//     // Action 通过 store.dispatch 方法触发：
//     asyncInc (context,ele) {
//         console.log(context) //代替的就是store实例
//         // console.log(ele)//同样也只能传递两个参数
//         console.log(ele)//**同样当使用对象风格的提交方式，整个对象都作为载荷(第二个参数)传给 mutation 函数
//         context.commit({type:"inc",num : ele.num})

//         // context.commit("inc",{num : 10, age : 20})
//     },
//     asyncDec ({commit,dispatch}) {//通过参数解构的形式
//         commit("dec")
//         dispatch("test")//两个actions之间，通过dispatch分发
//     },
//     test() {
//         console.log(1)
//     }
// }

// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
// 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
// Getter 接受 state 作为其第一个参数：
// let getters = {
//     count (state) {
//         return state.count += 100
//     }
// }


let state = {
    // count : 0

    count: 7,
    todos: [
        {
            id: 1,
            done: false
        },
        {
            id: 2,
            done: true
        },
        {
            id: 3,
            done: false
        },
        {
            id: 4,
            done: true
        },
        {
            id: 5,
            done: false
        },
    ]
}

// Mutation 必须是同步函数
// 每个mutation都有哟个字符串的事件类型和一个回调函数，回调函数state作为第一个参数
let mutations = {
    // inc(state,{num}){
    //     state.count += num
    // },
    // dec(state){
    //     state.count --
    // }
    // [INC] (){}
    inc(state, num) {
        console.log(num)
    },
}

// Action 提交的是 mutation，而不是直接变更状态。
// Action 可以包含任意异步操作。
// 回调函数context作为第一个参数
let actions = {
    // asyncInc(context,ele){
    //     // console.log(ele)
    //     // context.commit('inc', {num : 10})
    //     context.commit({type : 'inc',num : ele.num})
    // },
    // asyncDec({ commit , dispatch}){
    //     commit('dec')
    //     dispatch('test')
    // },
    // test(){
    //     console.log(1)
    // }

    asyncInc() {
        console.log('object')
    }
}

let getters = {
    // count(state){
    //     return state.count += 100
    // }

    doneTodos(state, getter) {
        // console.log(getter)             // getters对象
        return state.todos.filter(todo => todo.done).length  //todo 为数组中的每一项 filter默认过滤条件为真的
    },
    getTodoById: state => id => {
        return state.todos.find(todo => todo.id === id)
    }
}


export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})